<template>
    <div class="gray_page">
        <!--展示信息-->
        <div class="on showMessage" v-if="showList">
            <dl>
                <dt><img :src="carList.imgUrl || '@/assets/bigcar.png'"></dt>
                <dd>
                     <h3>{{carList.seriesName}}</h3>
                    <p v-for="item in carList.priceList" :key="item.index">指导价：{{item.minPrice}}万~{{item.maxPrice}}万</p>
                </dd>
            </dl>
        </div>
           <!--填写信息-->
        <div class="compileMessage">
            <div class="titleinfo">购车信息</div>
            <div class="on">
                <div class="messList">
                    <p>经销商</p>
                    <p>{{vkinfo.dealerName || '暂无'}}</p>

                </div>
                <div class="messList">
                    <p>推荐人</p>
                    <p>{{vkinfo.userName}}</p>
                </div>
            </div>
        </div>
        <div class="compileMessage">
            <div class="titleinfo">预约试驾</div>
            <div class="on">
                <div class="messList">
                    <p><span><img src="@/assets/name.png"></span><input type="text" placeholder="请输入您的姓名"  v-model="name"></p><b class="testb"></b>
                </div>
                <div class="messList">
                    <p><span><img src="@/assets/phone.png"></span><input type="text" placeholder="请输入您的手机号" v-model="userTel" maxlength="11"  @blur="handleUserTel"></p>
                    <p><b class="btnCode" @click="getAuth()" v-if="sendAuthCode">发送验证码</b>
                    <b class="btnCode" v-else>重新发送({{authTime}})</b>
                    </p>
                </div>
                <div class="messList">
                    <p><span><img src="@/assets/verificationcode.png"></span><input type="text" placeholder="请输入您的验证码"  v-model="userVerify" @blur= "handleVerify" maxlength="6"></p><b class="testb"></b>
                </div>
            </div>
        </div>
        <div class="btnSub submitBtn" @click="submit()">提交</div>
        <div v-if="show">
            <div class="gray2" @click="closeGray">
            </div>
            <div class="white2">
                <div class="pic2"><img :src=" 'data:image/jpg;base64,' + imgByte" alt=""></div>
                <div class="code2">
                    <div class="yzm2">答案是</div>
                    <input v-model="answerData" type="text" @blur="answer()">
                </div>
                <button @click="getphone()" id="sureBtn">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
import { getCarShopListDetails, buyCarinfo, getAuthCode, getDriveSmsCode, getDealer } from '@/api/api'
import { Toast, MessageBox } from 'mint-ui'
export default {
  name: '',
  data () {
    return {
      carList: [],
      name: '', // 用户输入的名字
      showList: true,
      vkinfo: {}, // 分享后渲染的详情页的数据
      sendAuthCode: true, // 控制显示提示或者倒计时
      show: false, // 控制验证码弹窗
      authTime: 60, // 倒计时
      userTel: '', // 用户手机号
      verificationCode: '', // 短信验证码
      userVerify: '', // 用户输入的验证码
      answerData: '', // 图片验证码的答案
      imgKey: '',
      imgByte: '',
      imgValue: '',
      yzcode: false
    }
  },
  created () {
    this.getShopList()
    this.getInfo()
  },
  methods: {
    submit () {
      // alert(JSON.stringify(this.$route.query) + '-------------- query数据')
      MessageBox.confirm('是否确认提交该信息？').then(action => {
        if (this.name === '') {
          Toast({
            message: '姓名不能为空'
          })
          return
        }
        if (this.userTel === '') {
          Toast({
            message: '手机号不能为空'
          })
          return
        }
        if (this.yzcode !== true) {
          Toast({
            message: '请填写正确的验证码'
          })
          return
        }
        let query = {
          name: this.name,
          phone: this.userTel,
          smsCode: this.userVerify,
          dealerName: this.vkinfo.dealerName,
          userName: this.vkinfo.userName,
          optytype: '02',
          seriesName: this.$route.query.seriesName,
          memberId: this.vkinfo.memberId,
          dealer: this.$route.query.dealer,
          brand: this.$route.query.brand,
          detail: this.$route.query.detail
        }
        // alert(JSON.stringify(query))
        buyCarinfo(query).then(res => {
          // alert(JSON.stringify(res))
          if (res.code < 0) {
            Toast({
              message: res.msg
            })
          } else {
            Toast({
              message: '提交成功'
            })
            this.$router.go(-1)
          }
        })
      })
    },
    getShopList () {
      let url = this.getUrlParams().seriesName
      let param = {
        series: url
      }
      // 购车信息
      getCarShopListDetails(param).then(res => {
        this.carList = JSON.parse(res.data)
      })
    },
    // 渲染详情的接口
    getInfo () {
      this.memberId = this.getUrlParams().memberId
      let query = {
        memberId: this.memberId
      }
      // alert('session' + query.memberId)
      getDealer(query).then(res => {
        this.vkinfo = JSON.parse(res.data)
        // console.log('vkinfo', this.vkinfo)
      })
    },
    handleUserTel () {
      let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (this.userTel === '') {
        Toast({
          message: '手机号不能为空'
        })
        return false
      } else if (!reg.test(this.userTel)) {
        Toast({
          message: '手机号格式不正确'
        })
        return false
      } else {
        return true
      }
    },
    getUrlParams () {
      var param = location.href.split('?')[1]// 获取到当前url后面所有的参数 location.href.split('?')[1]
      let obj = {}
      param.split('&').forEach((item) => {
        let newArr = item.split('=')
        obj[newArr[0]] = decodeURI(newArr[1])
      })
      return obj
    },
    getAuth () {
      if (this.handleUserTel()) {
        this.show = !this.show
        let params = {
          imgKey: this.imgKey,
          imgByte: this.imgByte
        }
        getAuthCode(params).then(res => {
          this.imgByte = res.imgByte
          // this.imgCode = res.imgCode
          this.imgKey = res.imgKey
        })
      }
    },
    getphone () {
      if (this.answerData === '') {
        Toast({
          message: '结果不能为空'
        })
        return
      }
      let params = {
        imgKey: this.imgKey || '',
        imgValue: this.answerData || '',
        tel: this.userTel || ''
      }
      getDriveSmsCode(params).then(res => {
        // console.log('yzm', res.data)
        if (res.code === -1) {
          Toast({
            message: res.msg
          })
          return false
        } else {
          this.show = false
          this.verificationCode = res.data.smsCode
          this.sendAuthCode = false
          this.authTime = 60 // 倒计时
          var authTimetimer = setInterval(() => {
            this.authTime--
            if (this.authTime <= 0) {
              this.sendAuthCode = true
              clearInterval(authTimetimer)
            }
          }, 1000)
        }
      })
    },
    handleVerify () {
      let codeReg = /^\d{6}$/
      if (this.userVerify === '') {
        Toast({
          message: '验证码不能为空'
        })
      } else if (!codeReg.test(this.userVerify)) {
        Toast({
          message: '验证码格式不正确'
        })
      } else if (this.userVerify !== this.verificationCode) {
        Toast({
          message: '验证码输入错误'
        })
      } else {
        this.yzcode = true
      }
    },
    answer () {

    },
    closeGray () {
      // 点击其他区域关闭弹窗
      this.show = false
    }
  }

}
</script>

<style scoped>
.gray_page {
  width: 100%;
  height: auto;
  padding-bottom: 1.4rem;
  overflow:scroll;
}
.on {
    background: white;
    padding: 15px 35px;
    margin-bottom: 10px;
}

.compileMessage .messList p input{
    text-align:left;
}

.compileMessage .messList p:last-child input{
    padding-left:0px;
}

.compileMessage .messList p:nth-of-type(1) input{
     border:none;
     outline: none;
     font-size: 25px;
}
.gray2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}
.white2{
    position: absolute;
    top: 38%;
    left: 10%;
    width: 80%;
    background: white;
    text-align: center;
    padding: 10px 0px;
}
.pic2{
    width:80%;
    margin: 20px auto;
    height: 150px;
    border: solid 1px gainsboro;
}
.pic2 img{
    width:100%;
}

.code2{
    width:80%;
    margin: 0 auto;
    text-align: left;
    display: flex;
}
.yzm2{
    width:30%;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
}
.code2 input{
    width:70%;
    height: 50px;
    border: solid 1px #000;
    border-radius:3px;
}
#sureBtn{
    width:80%;
    margin:20px auto;
    background: #0070E8;
    color:#fff;
    border:none;
    padding: 15px 0;
    font-size: 24px;
    border-radius: 3px;
}
.testb{
  width:160px;
  height:50px;
  border:none;
}
.submitBtn {
  position: fixed;
}
</style>
